<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-pie-chart"></i> 订单管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <div style="width: 380px; display: flex">
        <el-input
          v-model="query.orderNumber"
          placeholder="订单号"
          class="handle-input mr10"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          style="margin-left: 20px"
          @click="handleSearch"
          >搜索</el-button
        >
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="1">所有订单</el-tab-pane>
        <el-tab-pane label="今日订单" name="2">今日订单</el-tab-pane>
        <el-tab-pane label="待退款订单" name="3">待退款订单</el-tab-pane>
      </el-tabs>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          fixed
          prop="orderId"
          label="订单ID"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="orderCreateTime"
          label="下单时间"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="orderNumber"
          label="订单号"
          width="250"
        ></el-table-column>
        <el-table-column label="订单详细信息" width="150">
          <template #default="scope">
            <el-button size="mini" @click="handleOrderDetails(scope.row)"
              >查看订单详细</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="下单人" width="150">
          <template #default="scope">
            <el-button size="mini" @click="handleUser(scope.row)"
              >查看订单人信息</el-button
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="orderPhone"
          label="收货人手机号"
          width="140"
        ></el-table-column>
        <el-table-column
          prop="orderAddress"
          label="收货地址"
          width="300"
        ></el-table-column>
        <el-table-column label="订单状态" width="120">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.orderState === 0"
              >已支付</el-tag
            >
            <el-tag v-if="scope.row.orderState === 1">未支付</el-tag>
            <el-tag type="warning" v-if="scope.row.orderState === 2"
              >已取消</el-tag
            >
            <el-tag type="info" v-if="scope.row.orderState === 3"
              >已退款</el-tag
            >
            <el-tag type="danger" v-if="scope.row.orderState === 4"
              >待退款</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button
              @click="refound(scope.row)"
              type="primary"
              v-if="scope.row.orderState === 4"
            >
              退款
            </el-button>

            <el-button
              type="primary"
              v-else
              @click="editOrder(scope.$index, scope.row)"
              disabled
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageNum"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
      <el-dialog title="订单详情" v-model="OrderDetailedVisible">
        <el-table :data="OrderDetailedList.OrderDetailedList">
          <el-table-column
            property="goodsVo.goodsName"
            label="商品名称"
            width="150"
          ></el-table-column>
          <el-table-column
            property="orderDesc"
            label="订单描述"
            width="200"
          ></el-table-column>
          <el-table-column
            property="orderGoodsNumber"
            label="商品数量"
          ></el-table-column>
          <el-table-column
            property="goodsVo.goodsPrice"
            label="商品单价"
          ></el-table-column>
        </el-table>
        <div style="display: flex; width: 100%">
          <div
            class="money-inco"
            style="width: 40px; height: 40px; margin-top: 20px"
          >
            <div
              style="
                width: 200px;
                height: 40px;
                margin-left: 10px;
                font-size: 25px;
              "
            >
              商品总价:{{ OrderDetailedList.CountPrice / 100 }}￥
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog title="用户信息" v-model="UserVisible" width="500px">
        <div class="userInfo">
          <el-avatar
            shape="square"
            :size="100"
            :src="OrderUser.userHeaderImg"
          ></el-avatar>
          <div class="username">{{ OrderUser.userName }}</div>
          <div class="createtime">注册时间</div>
          <div class="time">({{ OrderUser.userCreateTime }})</div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="UserVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "../api/index";
// import userInfo from "@/components/UserInfo.vue"

export default {
  name: "baseform",
  components: {
    //   userInfo
  },
  data() {
    return {
      query: {
        orderNumber: "",
        pageNum: 1,
        type: "1",
      },
      tableData: [],
      OrderDetailedList: [],
      OrderUser: {},
      OrderDetailedVisible: false,
      UserVisible: false,
      activeName: "1",
      pageTotal: 0,
    };
  },
  mounted() {
    this.getOrderList();
  },
  watch: {
    activeName() {
      console.log(this.activeName);
      this.query.type = this.activeName;
      this.getOrderList();
    },
  },
  created() {},
  methods: {
    getOrderList() {
      request.getOrderList(this.query).then((res) => {
        if (res.code === 200) {
          console.log(res);
          this.$message.success("获取订单成功");
          // console.log(res);
          this.tableData = res.data.records;
          //   console.log(this.tableData);
          this.pageTotal = res.data.total;
        }
      });
    },
    handleOrderDetails(row) {
      //   console.log(index, row);
      let query = {
        orderNumber: row.orderNumber,
      };
      request.getOrderDetailedList(query).then((res) => {
        if (res.code === 200) {
          //   console.log(res);
          this.OrderDetailedList = res.data;
          //   console.log(this.OrderDetailedList);
          this.OrderDetailedVisible = true;
        } else {
          this.$message.error("获取订单详情失败");
        }
      });
    },
    handleUser(row) {
      let query = {
        openid: row.orderUserOpenId,
      };
      request.getUser(query).then((res) => {
        if (res.code === 200) {
          console.log(res);
          this.OrderUser = res.data;
          console.log(this.OrderUser);
          this.UserVisible = true;
        }
      });
    },
    handleSearch() {
      this.getOrderList();
    },
    refound(item) {
      // console.log(item);
      this.$confirm("确定要退款吗？", "提示", {
        type: "warning",
      }).then(() => {
        let query = {
          orderNumber: item.orderNumber,
        };
        request.refound(query).then((res) => {
          console.log(res);
          this.getOrderList()
        });
      });
    },
    handlePageChange(val) {
      console.log(val);
      this.query.pageNum = val;
      this.getOrderList();
    },
    editOrder(index, row) {
      console.log(index, row);
    },
  },
};
</script>
<style lang="scss" scoped>
.userInfo {
  width: 500px;
  height: 200px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  //   background-color: red;
  .username {
    width: 500px;
    display: flex;
    justify-content: center;
    margin-top: -10px;
    font-size: 30px;
  }
  .createtime {
    width: 500px;
    display: flex;
    justify-content: center;
    margin-top: -10px;
    font-size: 20px;
  }
}
</style>